<template>
  <div>
    <el-card class="box-card">
      <!-- 1第一行 -->
      <div class="one">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            ><span style="color: gray"> 资源配置</span></el-breadcrumb-item
          >
          <el-breadcrumb-item>平台介绍</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 按钮 -->
        <div class="but">
          <el-button
            @click="dailgshow"
            style="color: #004fe0; border: 1px solid #004fe0"
            >预览</el-button
          >
          <el-button
            style="background-color: #004fe0; color: white"
            @click="saveint"
            >保存</el-button
          >
          <el-button
            style="color: #004fe0; border: 1px solid #004fe0"
            @click="quxiao"
            >取消</el-button
          >
        </div>
      </div>
      <div class="objkss">
 <!--2 第二行 -->
      <div class="two">
        <!-- 标题 -->
        <div class="title">标题配置</div>
        <!-- 1文字表单 -->
        <el-form :model="formtitle" label-width="120px" label-position="left">
          <el-form-item label="平台名称 :">
            <el-input
              maxlength="20"
              show-word-limit
              type="text"
              v-model="formtitle.title"
            ></el-input>
          </el-form-item>
          <el-form-item label="平台简介 :">
            <el-input
              resize="none"
              maxlength="200"
              show-word-limit
              :rows="7"
              type="textarea"
              v-model="formtitle.description"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 3图片表单 -->
      <div class="imgtitle">背景配置</div>
      <div class="updata">
        <div class="text">背景图片:</div>
        <div class="img" @click="imgnow">
          <div class="clos" @click.stop="close" v-if="showimg"></div>
          <img v-show="showimg" :src="formtitle.backgroundImg" alt="" />
        </div>
        <input
          style="display: none"
          ref="imgs"
          name="file"
          type="file"
          accept="image/*"
          @change="updateFace"
        />
      </div>
      <div style="display: flex">
        <div style="width: 120px"></div>
        <div style="color: #b7b7b7; font-size: 14px; padding-top: 10px">
          支持PNG,JPG格式 不超过3M,建议尺寸为1920*1080
        </div>
      </div>
      </div>
     
    </el-card>
    <!-- 预览框 -->
    <div class="yulan" v-show="dailg">
      <div class="imgbig">
        <div class="closeready" @click="dailg = false"></div>
        <img :src="formtitle.backgroundImg" />
        <div class="text">
          {{ formtitle.title }}
        </div>
        <div class="texttwo">
          {{ formtitle.description }}
        </div>
      </div>
      <span>
        <!-- 内容 -->
      </span>
    </div>
    <!-- 这招成 -->
    <div class="mocks" v-show="dailg" @click="dailg = false"></div>
  </div>
</template>
<script>
//获取平台介绍  保存平台介绍  图片上传
import { getplaint, postplaint, imgss } from "@/api/srapi/srapi.js";
export default {
  naem: "平台介绍",
  data() {
    return {
      formtitle: {},
      showimg: true, //关闭按钮显示隐藏
      dailg: false, //对话框的显示隐藏
      format: {},
      imgnows: "", //当前图片的地址
    };
  },
  mounted() {
    this.$refs.imgs.type = "text";
    this.getint();
  },
  methods: {
    //获取平台介绍
    async getint() {
      const { data: res } = await getplaint();
      this.formtitle = res.data;
      console.log(res.data);
    },
    //保存平台介绍
    async sav(val) {
      const res = await postplaint(val);
      console.log(res);
    },
    //保存平台介绍
    async saveint() {
      this.sav(this.formtitle);
      console.log(this.formtitle);
      this.$message({
        message: "保存成功",
        type: "success",
      });
    },
    //图片上传
    async simgs(val) {
      const res = await imgss(val);
      this.formtitle.backgroundImg = res.data.data[0].url;
      console.log(res.data.data[0].url);
    },
    //关闭图片
    close() {
      this.imgnows = JSON.parse(JSON.stringify(this.formtitle.backgroundImg));
      this.showimg = false;
      this.formtitle.backgroundImg = "";
      this.$refs.imgs.type = "file";
      console.log(this.imgnows);
    },
    //点击上传图片
    imgnow() {
      this.$refs.imgs.click();
    },
    //调用图片
    updateFace(e) {
      let file = e.target.files[0];
      this.formtitle.backgroundImg = null;
      const type = file.type == "image/png" || file.type == "image/jpeg";
      if (file.size < 3145728 && type) {
        var param = new FormData(); // 创建form对象
        param.append("files", file);
        param.append("mediaType", 1);
        param.append("tagNames", "平台介绍");
        param.append("categoryName", "平台介绍"); // 通过append向form对象添加数据
        console.log(param.get("files")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
        this.simgs(param);
        this.showimg = true;
        this.$refs.imgs.type = "text";
      } else {
        this.$refs.imgs.type = "text";
        this.$message({
          message: "图片应为JPG或者PNG格式且小于3M",
          type: "warning",
        });
        this.$refs.imgs.type = "file";
        this.showimg = true;
        setTimeout(() => {
          this.formtitle.backgroundImg = this.imgnows;
        }, 100);
        console.log(this.imgnows);
      }
    },
    //对话框的显示隐藏
    dailgshow() {
      this.dailg = true;
    },
    //点击取消
    quxiao() {
      this.getint();
      this.showimg = true;
    },
  },
};
</script>
<style lang="scss" scoped>
//卡片
.box-card {
  //  width: 100%;
  margin-left: 24px;
  margin-top: 80px;
  margin-right: 24px;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 18px;
  padding-bottom: 100px;
  // min-width: 980px;
  position: relative;
}

/deep/.el-card__body {
  padding: 0 !important;
  // 1第一行
  .one {
    // display: flex;
    // justify-content: space-between;
    width: 100%;
    height: 32px;
   position: relative;
    // 面包屑
    .el-breadcrumb {
      position: absolute;
      left: 0;
      top: 0;
      font-size: 20px;
      height: 29px;
      line-height: 29px;
    }
    // 按钮
    .but {
       position: absolute;
      right: 0;
      top: 32px;
      // margin-top: 32px;
      .el-button {
        margin-right: 16px;
        margin-left: 0;
        height: 32px;
        line-height: 8px;
      }
      .el-button:nth-child(3) {
        margin-right: 0;
      }
    }
  }
  .objkss{
    overflow: auto;
 // 2第二行
  .two {
    padding-top: 48px;
    height: 280px;
    // width: 800px;
    // 标题
    .title {
      height: 28px;
      font-size: 20px;
      font-weight: 600;
      color: #000000;
      line-height: 28px;
      padding-bottom: 24px;
      text-align: left;
      margin-bottom: 24px;
    }
    // 表单
    .el-input {
      width: 600px;
      height: 40px;
      position: absolute;
      left: 0;
    }
    .el-textarea {
      position: absolute;
      left: 0;
      width: 600px;
    }
  }
  //3第三行
  //背景配置
  .imgtitle {
    height: 28px;
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    line-height: 28px;
    padding-bottom: 24px;
    text-align: left;
    margin-top: 180px;
    margin-bottom: 24px;
  }
  .updata {
    display: flex;
    // width: 800px;
    .text {
      width: 120px;
      text-align: left;
      height: 24px;
      font-size: 14px;
      font-weight: 400;
      color: #45484d;
      line-height: 24px;
    }
    .img {
      position: relative;
      width: 416px;
      height: 234px;
      background: url("../../video/Icon／.png") no-repeat center;
      background-color: #f2f2f2;
      border: 1px solid #dcdfe6;
      img {
        width: 100%;
        height: 100%;
        border: none;
      }
      .clos {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: url("./close.png") no-repeat center;
        position: absolute;
        right: -20px;
        top: -20px;
      }
    }
  }
  }
 
}
//预览框
.yulan {
  width: 1000px;
  height: 500px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 23;
  .imgbig {
    width: 100%;
    height: 100%;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .text {
      width: 200px;
      position: absolute;
      top: 210px;
      left: 130px;
      font-size: 20px;
      color: white;
    }
    .texttwo {
      width: 400px;
      color: white;
      position: absolute;
      top: 210px;
      left: 500px;
    }
    .closeready {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: url("./close.png") no-repeat center;
      position: absolute;
      right: -20px;
      top: -20px;
    }
  }
}
.mocks {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 22;
}
</style>